<template>
	<view>
		<view style="height: calc(100vh - 98upx);overflow: scroll;">
			<view class="content" >
				<view class="order-item">
					<view class="number">订单编号: {{order_detail.trade_no}}</view>
					<view class="flex" @click="handleToArticle(order_detail.order && order_detail.order.article && order_detail.order.article.type, order_detail.order && order_detail.order.article_id, order_detail.order && order_detail.order.id)">
						<view style="margin-top: 20upx;">
							<image style="width: 286upx;height: 198upx;" :src="order_detail.order && order_detail.order.cover_img" mode="aspectFill"></image>
						</view>
						<view style="margin: 36upx 0 0 18upx;">
							<view class="title">{{order_detail.order && order_detail.order.name}}</view>
							<text class="type">{{order_detail.category}}</text>
							<view style="margin-top: 32upx;font-size: 30upx;color: rgba(229,39,24,1);">￥{{order_detail.order && order_detail.order.sale_price}}</view>
						</view>
					</view>
				</view>
			</view>
			<view style="height: 10upx;background-color: rgba(248,248,248,1);"></view>
			<view class="flex align-center justify-between" style="padding: 26upx 20upx 20upx 20upx;">
				<view class="assess-title">互动评论</view>
        <view class="flex align-center">
          <text style="font-size: 26upx;color: rgba(153,153,153,1); margin-right: 10upx;">评分:</text>
          <uni-rate v-model="evaluate_detail.score"  color="#FF9288" activeColor="#FF9288" :size="18" :margin="4" readonly="true"/>
        </view>
			</view>
      <view style="width: 100%; padding: 0 22upx; margin-bottom: 20upx;">
        <view class="flex align-center" style="width: 100%; padding: 16upx; border: 1px solid #F8F8F8; font-size: 26upx; color: #333333;">
          {{evaluate_detail.content_html}}
        </view>
      </view>
      <view class="flex flex-wrap" style="width: 100%; padding: 0 20upx;">
        <view v-for="(item, index) in evaluate_detail.imgs" :key="index" style="margin-right: 10upx; margin-bottom: 10upx;">
          <image :src="item" style="width: 200upx; height: 200upx;"></image>
        </view>
      </view>
      <view style="width: 100%; height: 10upx; background-color: #F8F8F8; margin: 30upx 0;"></view>
      <view style="width: 100%; padding: 0 20upx; margin-bottom: 10upx;">
        <view class="assess-title">互动评论(追评)</view>
      </view>
			<view style="padding: 20upx 22upx;">
				<textarea class="assess-text" v-model="content_html" placeholder="请输入追评内容，字数限制200字" />
			</view>
      <view class="flex flex-wrap" style="width: 100%;">
        <view v-for="(item, index) in publish_imgs" :key="index" style="position: relative;padding-top: 20upx;padding-left: 24upx;">
          <image style="width: 200upx;height: 200upx; border-radius: 4upx;" :src="item" mode="aspectFill"></image>
          <image class="box-kong" @click="handleDeleteCoverMap(index)" src="/static/icon/comments/shanchu@2x.png" mode=""></image>
        </view>
        <view @click="handleAddCoverMap" v-if="publish_imgs.length < 5" style="height: 182upx;padding-top: 20upx;padding-left: 24upx;">
          <image style="width: 200upx;height: 200upx;" src="/static/image/add_imgs4@2x.png" mode=""></image>
        </view>
      </view>
      <view style="width: 100%; height: 100upx;"></view>
		</view>
		<view class="publish flex align-center justify-center" @click="handlePulish(order_detail.order.id, evaluate_detail.id, evaluate_detail.f_table)">发布</view>
	</view>
</template>

<script>
	import {orders_getById} from "api/my/my";
  import {chooseImage, getQiniuToken, test_authority} from "utils/wxUtil";
  import {evaluate_giveEvaluate} from "api/comment/comment";

  export default {
		data() {
			return {
				tab_list: ['待支付','已完成'], //分类栏
				tab_index: 0, //tab栏点击索引值
				order_detail: {}, //已完成订单
        evaluate_detail: {}, //评价详情
        content_html: '', //评论字段
				cover_map: '/static/image/pingluntu.png', //封面图路径
        publish_imgs: [], //发布评论图
			}
		},
		methods: {
      //初始化
      pageInit(orders_id){
        orders_getById({orders_id}).then(res=>{
          console.log(res)
          this.order_detail = res.data.orders;
          if(res.data.evaluate){
            if(res.data.evaluate.imgs){
              res.data.evaluate.imgs = res.data.evaluate.imgs.split(',');
            }
            this.evaluate_detail = res.data.evaluate;
          }
        })
      },
      //去商品详情
      handleToArticle(type, article_id, product_id) {
        if(type){
          const jump_url_obj = {
            article_product: '/pages/passBand/commodityDetail/commodityDetail',
            product: '/pages/passBand/otherDetail/otherDetail',
          }
          this.$uniNavigateTo({
            url: jump_url_obj[type],
            query: {
              article_id
            }
          })
        }else {
          this.$uniNavigateTo({
            url: '/pages/tutorials/articleDetail/articleDetail',
            query: {
              course_id: product_id
            }
          })
        }
      },
			/**
			 * @name 删除封面图
			 */
			handleDeleteCoverMap(index) {
			  this.publish_imgs.splice(index, 1)
			},
			//添加图片
			handleAddCoverMap() {
        let count = 5 - this.publish_imgs.length
        chooseImage(count).then(res => {
          let upload_imgs = res.image_array;
          this.publish_imgs = this.publish_imgs.concat(upload_imgs);
        })
			},
			//发布
			handlePulish(f_id, evaluate_id, f_table) {
        let imgs = this.publish_imgs.join(',')
        let data ={
          f_table: f_table,
          f_id: f_id,
          score: this.score,
          content_html: this.content_html,
          imgs: imgs,
          evaluate_id: evaluate_id,
        }
        evaluate_giveEvaluate(data).then(res=>{
          uni.showToast({
            title: '评价成功',
          })
          setTimeout(() => {
            uni.navigateBack({
              delta: 1
            });
          }, 500)
        }).catch(err=>{
          console.log(err)
        })
			},
		},
    onLoad(e){
      console.log(e)
      this.orders_id = e.orders_id;
      getQiniuToken()
      this.pageInit(e.orders_id);
    }
	}
</script>

<style scoped lang="scss">
	.content {
		background-color: rgba(248,248,248,1);
	}
	.order-item {
		background-color: #FFFFFF;
		border-radius: 10upx;
		padding: 0upx 18upx 20upx 22upx;
	}
	.number {
		padding: 20upx 0;
		font-size: 24upx;
		font-weight: 700;
		color: rgba(51,51,51,1);
		border-bottom: 1px solid rgba(0,0,0,0.05);
	}
	.title {
		font-size: 30upx;
		font-weight: 700;
		margin-bottom: 24upx;
	}
	.type {
		padding: 4upx 16upx;
		background-color: rgba(255,233,231,1);
		border-radius: 4upx;
		font-size: 22upx;
		color: rgba(241,93,80,1);
	}
	.assess-title {
		padding-left: 10upx;
		font-size: 26upx;
		font-weight: 700;
		border-left: 6upx solid rgba(229,39,24,1);
	}
	.box-kong {
    width: 28upx;
    height: 28upx;
		border-radius: 50%;
		background-color: rgba(181, 0, 0, 1.0);
		position: absolute;
    top: 5upx;
    right: -10upx;
	}
	.star {
		width: 35upx;
		height: 35upx;
		margin-left: 9upx;
	}
	.assess-text {
		font-size: 24upx;
		padding: 18upx 20upx;
		width: 100%;
		height: 372upx;
		border: 1px solid rgba(0,0,0,0.05);
	}
	.map-box {
		width: 244upx;
		height: 270upx;
		background-color: rgba(248,248,248,1);
		border-radius: 4upx;
		margin-right: 10upx;
	}
	.cover-map {
		padding: 0upx 0 0upx 22upx;
	}
	.publish {
		width: 100%;
		height: 98upx;
		background-color: rgba(229,39,24,1);
		color: #FFFFFF;
		font-size: 28upx;
		position: fixed;
		bottom: 0;
	}
</style>
